<template>
  <div style="width: 100%; height: 100%">
    <!-- 手机型号搜索选择器 -->
    <el-select
        v-model="selectedPhone"
        filterable
        clearable
        placeholder="搜索手机型号"
        style="width: 50%; height: auto;  margin-bottom: 0px;margin-left: 500px;margin-top: auto;
             "
        @change="handlePhoneSelect"
    >
      <el-button
          @click="cancelHighlight"
          style="margin-left: 10px;"
      >
        取消选择
      </el-button>
      <el-option
          v-for="phone in phoneOptions"
          :key="phone.value"
          :label="phone.label"
          :value="phone.value"
      />
    </el-select>

    <!-- 图表容器 -->
    <div ref="chart" style="width: 100%; height: 100%;margin-bottom: 20px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      phoneTypes: [],      // 原始手机型号数据
      phoneOptions: [],    // 处理后的选择器选项
      selectedPhone: '',   // 当前选中的手机型号
      chart: null          // ECharts实例
    };
  },

  async mounted() {
    const data = await fetchData('getseven');
    this.phoneTypes = data;
    this.processPhoneOptions();
    this.initChart();
  },

  methods: {

    // 处理手机型号数据生成选择器选项
    processPhoneOptions() {
      this.phoneOptions = this.phoneTypes.map(phone => ({
        value: phone.senderPhonetype,  // 使用手机型号作为value
        label: phone.senderPhonetype   // 同时作为显示label
      }));

      // 按手机型号名称排序
      this.phoneOptions.sort((a, b) => a.label.localeCompare(b.label));
    },

    // 处理手机型号选择
    handlePhoneSelect(selectedValue) {
      if (selectedValue && this.chart) {
        // 高亮选中的操作系统
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          name: selectedValue
        });

      }
    },
    cancelHighlight() {
      if (this.chart) {
        // 清除之前的定时器
        this.highlightTimeout && clearTimeout(this.highlightTimeout);

        // 取消所有高亮状态
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
          // 不指定name会取消该系列所有高亮
        });
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const total = this.phoneTypes.reduce((sum, phone) => sum + phone.cnt, 0);

      const option = {
        title: {
          text: '发送人的手机型号分布情况',

        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            const percent = ((params.value / total) * 100).toFixed(2);
            return `${params.name}<br/>数量: ${params.value}<br/>占比: ${percent}%`;
          },
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle'
        },
        series: [{
          name: '手机型号',
          type: 'pie',
          radius: '50%',
          data: this.phoneTypes.map(phone => ({
            value: phone.cnt,
            name: phone.senderPhonetype,
          })),
          label: {
            formatter: params => {
              const percent = ((params.value / total) * 100).toFixed(2);
              return `${params.name}: ${percent}%`;
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        }],
      };

      this.chart.setOption(option);

      // 点击图表时同步选择器
      this.chart.on('click', (params) => {
        this.selectedPhone = params.name;
      });

      window.addEventListener('resize', this.handleResize);
    },

    handleResize() {
      this.chart && this.chart.resize();
    }
  },

  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.off('click');
      this.chart.dispose();
    }
  }
};
</script>